<template>
	<div class="musiclist">
		<div class="top">

			<i class="iconfont icon-return" @click="$router.go(-1)"></i>
			<p>排行榜</p>

		</div>

		<div class="officialList">
			<h2>官方榜</h2>
			<template  v-for="(item,index) in musiclist">
				<div class="list" v-if="index<4" :key="item.id">
					<div class="imgbox">
						<img :src="item.coverImgUrl" alt="" />
					</div>
					<div class="music">
						<div v-for="(val,idx) in item.tracks" :key="idx">
							<span>{{idx+1}}</span>
							<span>{{val.first}}</span>
							<span>{{val.second}}</span>
						</div>
					</div>
				</div>
			</template>
		</div>
		
		<div class="recommendList">
			<h2>推荐榜</h2>
			<div class="lists">
				<template v-for="(item,index) in musiclist">
				<div class="morelist" v-if="index>3&& index<10" :key="item.id">
					<div class="pic_box">
					<img :src="item.coverImgUrl" alt="" />
					</div>
					<p>{{item.name}}</p>
				</div>
			</template>
			</div>
		</div>
		
		<div class="recommendList">
			<h2>全球榜</h2>
			<div class="lists">
				<template v-for="(item,index) in musiclist">
				<div class="morelist" v-if="index>9&& index<16" :key="item.id">
					<div class="pic_box">
					<img :src="item.coverImgUrl" alt="" />
					</div>
					<p>{{item.name}}</p>
				</div>
			</template>
			</div>
		</div>
		
		<div class="recommendList">
			<h2>更多榜单</h2>
			<div class="lists">
				<template v-for="(item,index) in musiclist">
				<div class="morelist" v-if="index>15" :key="item.id">
					<div class="pic_box">
					<img :src="item.coverImgUrl" alt="" />
					</div>
					<p>{{item.name}}</p>
				</div>
			</template>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "musiclist",
		data() {
			return {
				musiclist: []
			}
		},
		created() {
			this.$http.get("/toplist/detail").then(res => {
				console.log(res)
				this.musiclist = res.data.list;
				console.log(this.musiclist)

			})
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.musiclist {
		.top {
			width: 100%;
			display: flex;
			align-items: center;
			padding: vw(10) vw(16);
			display: flex;
			align-items: center;
			i {
				font-size: vw(24);
			}
			p {
				font-size: vw(18);
				margin-left: vw(4);
			}
		}
		.officialList {
			padding: 0 vw(16);
			h2 {
				font-size: vw(16);
				margin-bottom: vw(10);
				font-weight: 600;
			}
			.list {
				.imgbox {
					width: vw(100);
					height: vw(100);
					overflow: hidden;
					display: inline-block;
					border-radius:vw(6);
					img {
						width: 100%;
					}
				}
			}
			.music {
				display: inline-block;
				vertical-align: top;
				div{
					margin: vw(10) 0;
					font-size: vw(14);
					color: #666;
					span{
						padding-left: vw(10);
					}
				}
			}
		}
		.recommendList{
			padding: 0 vw(16);
			h2 {
				font-size: vw(16);
				margin: vw(10) 0 0;
				font-weight: 600;
			}
			.lists{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.morelist{
					width: 33.33%;
					padding: 0 vw(4) 0 0;
					text-align:left;
					margin:vw(10) 0;
					.pic_box{
						width: 100%;
						height: vw(104);
						overflow: hidden;
						border-radius:vw(6);
						img{
							width: 100%;
						}
					}
					p{
						font-size: vw(13);
						padding: vw(6) 0 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				&::after{
				content: "";
				flex: auto;
			}
			}
			
		}
	}
</style>